window.addEventListener('load',function () {
    var arrow_l=document.querySelector('.arrow-l');
    var arrow_r=document.querySelector('.arrow-r');
    var focus=document.querySelector('.focus');
    var focusWidth=focus.offsetWidth;
    focus.addEventListener('mouseenter',function () {
        arrow_l.style.display='block';
        arrow_r.style.display='block';
    })
    focus.addEventListener('mouseleave',function (evt) {
        arrow_l.style.display='none';
        arrow_r.style.display='none';
    })
//    动态生成小圆圈，有几张图片，我们就生成几个小圆圈
    var ul=focus.querySelector('ul');
    var ol=document.querySelector('.circle')
    console.log(ul.children.length);
    for (var i = 0; i <ul.children.length ; i++) {
        var li=document.createElement('li');
        //通过设置自定义属性来记录小圆圈的索引号
        li.setAttribute('index',i);
        ol.appendChild(li);
    //    小圆圈的排他思想，可以直接在生成小圆圈的同时直接绑定事件
        li.addEventListener('click',function (ev) {
            for (var j = 0; j <ol.children.length ; j++) {
                ol.children[j].className='';
            }
            this.className='current';
        //    点击小圆圈移动图片,移动的是ul
            var index=this.getAttribute('index');
            //当我们点击了某个小li 就要把这个li的索引号给num
            num=index;
            //当我们点击了某个小li 就要把这个li的索引号给circle
            circle=index;
            console.log(this.getAttribute('index'));
            animate(ul,-index*focusWidth);
        })
    }
    //把ol里面的第一个小li设置类名为current
    ol.children[0].className='current';
    //克隆第一张图片
    var first=ul.children[0].cloneNode(true);
    ul.appendChild(first);
    //点击右侧按钮,图片滚动一张
    var num=0;
    //控制小圆圈的播放
    var circle=0;
    //flag为节流阀
    var flag=true;
    arrow_r.addEventListener('click',function (evt) {
       if (flag) {
           flag=false;//关闭节流阀
           //如果走到了最后复制的一张图片，此时我们的ul要快速复原left为0
           if (num==ul.children.length-1) {
               ul.style.left=0;
               num=0;
           }
           num++;
           animate(ul,-num*focusWidth,function () {
               flag=true;//打开节流阀
           });
           circle++;
           //    先清除其他小圆圈的current类名
           for (var i = 0; i <ol.children.length ; i++) {
               ol.children[i].className='';
           }
           //    判断小圆圈位置是否为克隆图片位子
           if (circle==ul.children.length-1) {
               circle=0;
           }
           //    留下当前小圆圈的current类名
           ol.children[circle].className='current';
       }
    })
    //左侧按钮移动
    arrow_l.addEventListener('click',function (evt) {
       if (flag) {
           flag=false;
           if (num==0) {
               num=ul.children.length-1;
               ul.style.left=-num*focusWidth+'px';

           }
           num--;
           animate(ul,-num*focusWidth,function () {
               flag=true;
           });
           circle--;
           //    先清除其他小圆圈的current类名
           for (var i = 0; i <ol.children.length ; i++) {
               ol.children[i].className='';
           }
           //   如果circle<0 说明第一张图片，则小圆圈要改成第四个小圆圈（3）
           if (circle<0) {
               circle=ol.children.length-1;
           }
           //    留下当前小圆圈的current类名
           ol.children[circle].className='current';
       }
    })
    function leave() {
        //手动调用点击事件
        arrow_r.click();
    }
    //开始自动播放轮播图
    var timer=setInterval(leave,2000);
    //鼠标经过停止播放
    ul.addEventListener('mouseover',function (ev) {
        clearInterval(timer);
    })
    //鼠标离开开始自动播放
    ul.addEventListener('mouseout',function (ev) {
        timer=setInterval(leave,2000);
    })

})